 模板
<template>
  <div>
    <!-- BasicTable 组件用于展示表格数据，支持自定义工具栏和单元格内容 -->
    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess"
                :rowSelection="{ type: 'checkbox' }">
      <!-- 自定义工具栏，包含导出按钮、导入组件和新增按钮 -->
      <template #toolbar>
        <!-- 导出按钮，点击时触发handleExport方法 -->
        <a-button type="primary" color="error" @click="handleBatchDelete"> 批量删除 </a-button>
        <a-button type="primary" color="success" @click="handleExport"> 导出Excel表格 </a-button>
        <!-- 导入组件，用于上传excel模板，支持文件类型为xlsx -->
        <BasicUpload
          :maxNumber="1"
          @change="handleImport"
          :api="importTemplateApi"
          :accept="['xlsx/*']"
          helpText="要导入的excel模板"
        />
        <!-- 新增按钮，点击时触发handleCreate方法 -->
        <a-button type="primary" @click="handleCreate"> 新增templateText </a-button>
      </template>
      <!-- 定义表格单元格内容，此处用于添加操作按钮 -->
      <template #bodyCell="{ column, record }">
        <!-- 如果是操作列，则渲染TableAction组件，包含编辑和删除操作 -->
        <template v-if="column.key === 'action'">
          <TableAction
            :actions="[
              {
                icon: 'clarity:note-edit-line',
                onClick: handleEdit.bind(null, record),
              },
              {
                icon: 'ant-design:delete-outlined',
                color: 'error',
                popConfirm: {
                  title: '是否确认删除',
                  placement: 'left',
                  confirm: handleDelete.bind(null, record),
                },
              },
            ]"
          />
        </template>
      </template>
    </BasicTable>
    <!-- TemplateDrawer 组件用于弹出新增或编辑表单，支持注册和成功回调 -->
    <TemplateDrawer @register="registerDrawer" @success="handleSuccess" />
  </div>
</template>

<script lang="ts" setup>
import { nextTick } from 'vue';

// 导入表格组件和相关钩子
import { BasicTable, useTable, TableAction } from '@/components/Table';
// 导入模板管理相关的API接口
import {
  deleteBatchTemplateApi,
  deleteTemplateApi,
  getTemplateListTable, importTemplateApi
} from "@/views/sys/cc/template/api/template.api";

// 导入抽屉组件的钩子
import { useDrawer } from '@/components/Drawer';
// 导入模板抽屉组件
import TemplateDrawer from './TemplateDrawer.vue';

// 导入模板配置数据：列和搜索表单架构
import { columns, searchFormSchema } from './config/template.data';
// 导入文件下载工具函数
import {downloadByUrl} from "@/utils/file/download";
// 导入上传组件
import {BasicUpload} from "@/components/Upload";
import {getAppEnvConfig, getEnv} from "@/utils/env";

// 定义组件名称
defineOptions({ name: 'MenuManagement' });

// 注册抽屉组件并获取打开抽屉的函数
const [registerDrawer, { openDrawer }] = useDrawer();

// 使用自定义的useTable组合式函数初始化表格组件，该函数返回一个注册表和一组控制表格行为的方法
const [registerTable, { reload, expandAll, getSelectRows }] = useTable({
  // 表格的标题
  title: 'templateText列表',
  // 获取表格数据的API函数
  api: getTemplateListTable,
  // 表格的列配置
  columns,
  // 表格关联的表单配置
  formConfig: {
    // 表单标签的宽度
    labelWidth: 120,
    // 表单的字段配置
    schemas: searchFormSchema,
    // 在按下Enter键时自动提交表单
    autoSubmitOnEnter: true,
  },
  // 标识表格是否为树形表格
  isTreeTable: true,
  // 配置表格是否显示分页
  pagination: true,
  // 配置表格是否显示斑马纹
  striped: true,
  // 配置是否使用搜索表单
  useSearchForm: true,
  // 配置是否显示表格设置按钮
  showTableSetting: true,
  // 配置表格是否显示边框
  bordered: true,
  // 配置是否显示索引列
  showIndexColumn: false,
  // 配置表格列是否可以调整宽度
  canResize: true,
  // 表格的操作列配置
  actionColumn: {
    // 操作列的宽度
    width: 80,
    // 操作列的标题
    title: '操作',
    // 操作列的数据索引
    dataIndex: 'action',
    // fixed: undefined, // 原代码中注释掉的操作列固定位置设置，未使用
  },
});

/**
 * 打开创建表项的抽屉
 */
function handleCreate() {
  openDrawer(true, {
    isUpdate: false,
  });
}

/**
 * 打开编辑表项的抽屉
 * @param {Recordable} record - 要编辑的记录
 */
function handleEdit(record: Recordable) {
  openDrawer(true, {
    record,
    isUpdate: true,
  });
}

/**
 * 删除指定的模板
 * @param {Recordable} record - 要删除的记录
 */
function handleDelete(record: Recordable) {
  deleteTemplateApi({ id: record.id }).then(() => {
    reload();
  });
}

/**
 * 操作成功后重新加载数据
 */
function handleSuccess() {
  reload();
}

/**
 * 获取数据成功后的回调，用于演示默认展开所有表项
 */
function onFetchSuccess() {
  // 演示默认展开所有表项
  nextTick(expandAll);
}

/**
 * 导出模板
 */
function handleExport() {
  downloadByUrl({
    url: getAppEnvConfig().VITE_GLOB_API_URL + '/template/export',
    target: '_self',
    fileName: 'template.xlsx',
  });
}

/**
 * 导入模板的占位函数
 */
function handleImport() {
}

// 批量删除
function handleBatchDelete() {
    // 获取选中的行的id
    let selectRows = getSelectRows();
  deleteBatchTemplateApi({ ids: selectRows.map(item => item.id) }).then(() => {
        reload();
    });
    console.log('批量删除', getSelectRows());
}

</script>
